<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML>
<html>
<head>
<title>购物网</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/basestyle.css"></link>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/maintable.css"></link>
<style>
	.validate_info{
		color:blue;
		font-size:12px;
		padding-left: 5px;
	}
	.validate_ok{
		color:green;
		font-szie:12px;
		padding-left: 5px;
	}
	.validate_error{
		color:red;
		font-size:12px;
	 	padding-left: 5px;
	}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.4.js"></script>
<script>
	
	function showOk(item,msg){
		$("#"+item.id+"_msg").html("√").removeClass().addClass("validate_ok"); 
	}
	
	function showError(item,msg){
		$("#"+item.id+"_msg").removeClass().addClass("validate_error").html(msg);
	}
	
	function showInfo(item,msg){
		$("#"+item.id+"_msg").removeClass().addClass("validate_info").html(msg); 
	}
	//验证用户名
	function checkLoginName(item){
		var result=true;
		if(item.value==""){
			showError(item,"登录名不能为空");
			result =false;
		}
		else{
			var reg=/^\w{6,12}$/;
			if(reg.test(item.value)==false){
				result=false;
				showError(item,"登录名格式不正确");
			}
			else{
				$.ajax({
					url:"${pageContext.request.contextPath}/AjaxUserServlet",
					method:"post",
					data:{loginName:$("#loginName").val()},
					//dataType:"json",
					cache:false,
					async:false,  //注意,这里不能使用异步
					success:function(data){
						if(data!="0"){
							result =false;
							showError(item,"用户名已经被使用!");
						}
						else{
							showOk(item);
						}
					}
				});	
			}
		}
		
		return result;
	}
	
	//验证用户密码
	 function checkLoginPwd(item){
	  	var result=true;
		if(item.value==""){
			result =false;
			showError(item,"密码不能为空");
		}
		else {
			var reg=/^\w{6,12}$/;
			if(reg.test(item.value)==false){
				result=false;
				showError(item,"密码格式不正确");
			}
			else{
				 showOk(item);
			}
		}
		
		return result;
	}
	 
	 //验证确认密码
	function checkReLoginPwd(item){
	  	var result=true;
		if(item.value==""){
			showError(item,"确认密码不能为空");
			result =false;
		}
		else{
			if(item.value!=$("#loginPwd").val()){
				showError(item,"两次输入的密码不一致");
				result =false;
			}
			else{
				 showOk(item);
			}
		}
		return result;
	}
	
	//验证身份证号
	function checkIdCard(item){
		var result=true;
		
		if(item.value!=""){
			  var reg=/(^\d{17}[xX\d]$)|(^\d{14}[xX\d]$)/;
			  if(reg.test(item.value)==false){
			  	result=false;
			  	showError(item,"身份证号格式不正确");
			  }
			  else{
			  	showOk(item);
			  }
		}
		else{
			showInfo(item,"");  //身份证号是可以不添的
		}
		
		return result;
		
	}
	
	
	//验证真实姓名
	function checkName(item){
		var result=true;
		var trueName = item.value;
		var reg1 = /^[\u4E00-\u9FA5]+$/;
		var reg2 = /^[_A-Za-z]+$/;
		if(trueName==""){
	   		showInfo(item,""); //真实姓名是可以不添的
	  	}
	  	else{
		  	if(!(reg1.test(trueName)||reg2.test(trueName))){
		  		result= false;
		  		showError(item,"真实姓名无效, 只能为英文字母或汉字 !"); 
		  	}
		  	
		  	else{
		  		showOk(item);	
		  	} 
	  	}
	  	
	  	return result;
	}
	
	//验证邮证编码
	function checkZipCode(item){
		var result=true;
		if(item.value==""){
	   		showInfo(item,"") ;  //邮编可以为空
	  	}
	  	else{
		  	var reg = /^[1-9]\d{5}(?!\d)$/;
		  	if(!reg.test(item.value)){
		   		result= false;
		  		showError(item,"邮编格式不正确");
		  	}
		  	else{
		  		showOk(item);
		  	}
	  	}
	 
	  	return result;
	}
	
	//验证邮箱
	function checkEmail(item){
		var result=true;
		if(item.value==""){
	   		showInfo(item,""); //邮箱可以空
	  	}
	  	else{
		  	var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
		  	if(!reg.test(item.value)){
		   		result= false;
		  		showError(item ,"邮箱格式不正确");
		  	}
		  	else{
		  		showOk(item);
		  	}
	  	}
	  	return result;
	}
	
	//验证手机号
	function checkPhone(item){
		var result=true;
		if(item.value==""){
			showInfo(item,""); //手机号可以为空
		}
		else{
			var reg = /^1\d{10}$/;
			if(!reg.test(item.value)){
				result=false;
				showError(item,"手机号无效 ");
			}
			else{
				showOk(item);
			}
		}	
		
		return result;
	}
	
	
	function validateInput(){
		var result=true;
		if(!checkLoginName(document.getElementById("loginName"))){
			result=false;
		}
		if(!checkLoginPwd(document.getElementById("loginPwd"))){
			result=false;
		}
		if(!checkReLoginPwd(document.getElementById("reLoginPwd"))){
			result=false;
		}
		if(!checkIdCard(document.getElementById("idCardNum"))){
			result=false;
		}
		if(!checkName(document.getElementById("trueName"))){
			result=false;
		}
		if(!checkZipCode(document.getElementById("zipCode"))){
			result=false;
		}
		if(!checkEmail(document.getElementById("email"))){
			result=false;
		}
		if(!checkPhone(document.getElementById("phone"))){
			result=false;
		}
	
		if(result==true)
		{
			result=confirm("确定要提交吗");
		}
		
		return result;
	}
</script>

</head>
<body>
<div id="div_content">
 <%@ include file="../top.jsp" %>
 <form  name="form1" method ="post" action="${pageContext.request.contextPath }/UserServlet?flag=add" >
 <table class="main_table">
	  <tr>
	    <td colspan="2" class="first_td"><img src="${pageContext.request.contextPath }/images/icon_regster.gif" /></td>   
	  </tr>
	   <tr>
	    <td class="desc_td" >登录名称：</td>   
	    <td>
	    	<input type="text" name="loginName" id="loginName" onfocus="showInfo(this,'6-20 位英文字母或数字')" 
	    	onblur="checkLoginName(this)" class="text_box" />
	    	<label class="validate_error">*</label><label id="loginName_msg" ></label>
	    </td>  
	  </tr>
	  
	   <tr>
	    <td class="desc_td" >登录密码：</td>   
	    <td>
	    	<input type="password" name="loginPwd" id="loginPwd" onfocus="showInfo(this,'6-20 位英文字母或数字')"  onblur="checkLoginPwd(this);"   class="text_box" />
	    	<label class="validate_error">*</label><label id="loginPwd_msg" ></label>
	    </td>  
	  </tr>
	  
	  <tr>
	    <td class="desc_td" >确认密码：</td>   
	    <td>
	    	<input type="password" name="reLoginPwd" id="reLoginPwd"  onfocus="showInfo(this,'请输入确认密码')"  onblur="checkReLoginPwd(this);" class="text_box" />
	    	<label class="validate_error">*</label><label id="reLoginPwd_msg" ></label>
	    </td>  
	  </tr>
	  
	  <tr>
	    <td class="desc_td" >身份证号：</td>   
	    <td>
	    	<input type="text" name="idCardNum" id="idCardNum" maxlength="18"  onfocus="showInfo(this,'请输入正确的15或18位身份证号码')"  onblur="checkIdCard(this);"  class="text_box" />
	 		<label id="idCardNum_msg" ></label>
	    </td>  
	  </tr>
	  
	   <tr>
	    <td class="desc_td" >真实姓名：</td>   
	    <td>
	    	<input type="text" name="trueName" id="trueName" maxlength="10"  onblur="return checkName(this);" onfocus="showInfo(this,'只能为英文字母或汉字')"  class="text_box" />
	    	<label id="trueName_msg" ></label>
	    </td>  
	  </tr>
	  
	  
	   <tr>
	    <td class="desc_td" >密码问题：</td>   
	    <td>
	    	  <select name="pwdQue">
				      <option value="小学学校名称">小学学校名称</option>
				      <option value="学校学号">学校学号</option>
				      <option value="母亲生日">母亲生日</option>
			  </select>
	    </td>  
	  </tr>
	  
	   <tr>
	    <td class="desc_td" >密码答案：</td>   
	    <td>
	    	<input type="text" name="pwdAnswer" id="pwdAnswer" class="text_box" />
	    	<label id="pwdAnswer_msg" ></label>
	    </td>  
	  </tr>
	  
     <tr>
	    <td class="desc_td" >邮政编码：</td>   
	    <td>
	    	<input type="text" name="zipCode" id="zipCode" maxlength="6" onfocus="showInfo(this,'6位数字')" onblur="checkZipCode(this);" class="text_box"  />
	    	<label id="zipCode_msg" ></label>
	    </td>  
	  </tr>
	  
     <tr>
	    <td class="desc_td" >联系地址：</td>   
	    <td>
	    	<input type="text" name="address" class="text_box"  />
	    </td>  
	  </tr>
	  
	  <tr>
	    <td class="desc_td" >电子邮箱：</td>   
	    <td>
	    	<input type="text" name="email" id="email" onfocus="showInfo(this,'请输入正确的邮箱地址')" onblur="return checkEmail(this);" class="text_box"  />
	    	<label id="email_msg" ></label>
	    </td>  
	  </tr>
	  
	  <tr>
	    <td class="desc_td" >联系电话：</td>   
	    <td>
	    	<input type="text" name="phone" id="phone"  onfocus="showInfo(this,'请输入手机号码')" onblur="return checkPhone(this);" class="text_box" />
	    	<label id="phone_msg" ></label>
	    </td>  
	  </tr>
	  
	  <tr>
	 	 <td colspan="2" class="last_td">
	 	 	<input type="image" src="${pageContext.request.contextPath }/images/zhuce_button.gif" onclick="return validateInput();">
	 	  	<input type="image" src="${pageContext.request.contextPath }/images/quxiao_button.gif"  onclick="document.form1.reset();return false" />

	 	 
	 	 	<label class="info"> ${msg }</label>
	 	 </td>  
	  </tr>
	 </table>
	 

	 
 </form>
  <%@ include file="../bottom.jsp"%>
  </div>
</body>
</html>
